<template>
  <div style="width:100%;height:100%;display: inline-block;">
    <div class="open"  @click="drawer = true" style="z-index:100;">
      <img src="@/assets/提问.png" style="width: 35px;position:absolute;left:10px;top:7.5px;" />
      <h1 style="font-size: 15px;position: absolute;top:12px;left:50px;">点击打开搜索板</h1>
    </div>
    <el-drawer v-model="drawer" title="练习题生成" :with-header="false" style="z-index: 9999;" :size="'416px'">
      <img src="@/assets/提问.png" style="width: 35px;position:absolute;left:20px;top:20px;" />
      <span style="font-size: 20px;font-weight: 700;position: absolute;left: 60px;">习题题生成请求板</span>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="描述生成" name="description">
          <Description @changeState="changeState" @changeInternetState="changeInternetState" @changeDrawer="changeDrawer"/>
        </el-tab-pane>
        <el-tab-pane label="选择生成" name="select">
          <Select @changeState="changeState" @changeInternetState="changeInternetState" @changeDrawer="changeDrawer"/>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <div style="background-color: white;width:700px;height:100%;position:absolute;top:3%;left:20px;border-radius:15px;overflow: auto;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);">
      <h1 style="font-size: 20px;font-weight: 700;position:absolute; left:300px;top:5px;">生成编辑区</h1>
      <div style="position: absolute; top:40px;width:100%;height:91%;">
        <hr style="background-color: #eeeff6; height: 2px; border: none;" />
        <div v-if="Store.$state.Question.Editor.length === 0 && progress===false && internet===true">
          <img src="@/assets/暂无习题.png" style="position: absolute;width: 300px;left:200px;top:100px;"/>
          <h1 style="font-size: 16px;color:#B8BDCC;position:absolute;top:350px;left:190px;">暂时没有习题噢，点击右侧标签进行生成吧</h1>
        </div>
        <div v-else-if="Store.$state.Question.Editor.length === 0 && progress===true">
          <div id="lottie-container" style="width: 400px; height: 400px;position: absolute;top:50px;left:150px;">
            <h1 style="font-size: 15px;position: absolute;top: 280px;left:80px;color:#AFC6FC;">您的习题套餐正在派送中，请稍候！！!</h1>
          </div>
        </div>
        <!-- 一个获取失败的界面效果 -->
        <div v-else-if="Store.$state.Question.Editor.length === 0 && progress===false && internet === false">
          <img src="@/assets/网络中断.png" style="position: absolute;width: 300px;left:200px;top:100px;"/>
          <h1 style="font-size: 16px;color:#B8BDCC;position:absolute;top:350px;left:260px;">网络错误，请重新进行操作</h1>
        </div>
        <div style="width:100%;height:100%;" v-else>
          <Question />
        </div>
      </div>
    </div>
    <div style="background-color: white;width:460px;height:100%;position:absolute;top:3%;left:740px;border-radius:15px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);">
      <h1 style="font-size: 20px;font-weight: 700;position:absolute; left:180px;top:5px;">生成预览区</h1>
      <div style="position: absolute; top:40px;width:100%;height:91%;">
        <hr style="background-color: #eeeff6; height: 2px; border: none;" />
        <div v-if="Store.$state.Question.Confirm.length === 0">
          <img src="@/assets/空空如也.png" style="position: absolute;width: 300px;left:80px;top:100px;" />
          <h1 style="font-size: 16px;color:#B8BDCC;position:absolute;top:350px;left:90px;">暂时没有习题噢，请从左侧编辑区添加</h1>
        </div>
        <div style="width:100%;height:100%;" v-else >
          <Question2 />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted,watch,nextTick } from 'vue';
import type { TabsPaneContext,ElInput ,ElForm,ElFormItem } from 'element-plus';
import Description from './Description.vue';
import Select from './Select.vue'
import Question from './Question.vue'
import Question2 from './Question2.vue';

// 定义抽屉状态
const drawer = ref(false);

function changeDrawer(index:any){
  drawer.value=index;
}

// 选项卡相关
const activeName = ref('description');


const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

import { useCounterStore } from '@/stores/counter';
const Store = useCounterStore();
const progress=ref(false)//true为在获取中，false为没在获取中
const internet=ref(true)//true为网络正常，false为网络错误
// 监听 progress 的变化
watch(progress, async (newVal) => {
  if (newVal) {
    await nextTick(); // 等待 DOM 更新
    loadLottieAnimation();
  } else {
    destroyLottieAnimation();
  }
});
function changeState(index:any){
  progress.value=index;
  console.log("progress的值为"+progress.value)
}
function changeInternetState(index:any){
  internet.value=index;
}
// 存储 Lottie 动画实例
let lottieInstance: any = null;
// 加载 Lottie 动画的函数
function loadLottieAnimation() {
  const container = document.getElementById('lottie-container');
  if (container) {
    // 销毁旧的动画实例
    if (lottieInstance) {
      lottieInstance.destroy();
      lottieInstance = null;
    }

    // 加载新的动画实例
    lottieInstance = lottie.loadAnimation({
      container: container, // 动画容器
      renderer: 'svg',      // 渲染方式（svg/canvas/html）
      loop: true,           // 是否循环播放
      autoplay: true,      // 是否自动播放
      path: 'https://assets4.lottiefiles.com/packages/lf20_x62chJ.json', // Lottie 动画文件路径
    });
  }
}
function destroyLottieAnimation() {
  if (lottieInstance) {
    lottieInstance.destroy();
    lottieInstance = null;
  }
}

import lottie from 'lottie-web';


</script>

<style scoped>
.open {
  width: 200px;
  height: 50px;
  background-color: rgb(182, 214, 248);
  position: absolute;
  right: -150px; /* 确保右边距固定 */
  bottom: 200px;
  transition: all 0.3s ease; /* 添加过渡效果 */
  border-radius: 25px;
  cursor: pointer;
}
.open:hover {
  right: -30px;
}

.demo-tabs {
  position: absolute;
  top: 50px;
  width: 90%;
  height: 90%;
}
</style>